<template>
    <div class="page-component">
      <h2>快速上手</h2>
      <p>本节课将介绍如何在项目中使用Element。</p>
      <h3>使用vue-cli@3</h3>
      <p>我们为新版的vue-cli准备了相应的ELement插件，你可以用它们快速的搭建一个基于Elemnt的项目</p>
      <h3>使用Starter Kit</h3>
      <p>我们提供了通用的项目模板，你可以直接使用。对于Laravel用户，我们也准备了相应的模板，同样可以直接下载使用</p>
      <p>如果不希望使用我们提供的模板，请继续阅读</p>
      <h3>引入Element</h3>
      <p>你可以引入整个ELement，或是根据需要引入部分组件。我们先介绍如何引入完整的ELement。</p>
      <h4>完整引入</h4>
      <p>在 main.js 中写入以下内容：</p>
      <div v-highlight>
        <pre>
          <code>
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});
          </code>
        </pre>
      </div>
      <p>以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。</p>
      <h4>按需引入</h4>
      <p>借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。</p>
      <p>首先，安装 babel-plugin-component：</p>
      <div v-highlight>
        <pre>
          <code>npm install babel-plugin-component -D</code>
        </pre>
      </div>
      <p>然后，将 .babelrc 修改为：</p>
      <div v-highlight>
        <pre><code>{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}</code></pre>
      </div>
      <p>接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：</p>
      <div v-highlight>
        <pre><code>import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});</code></pre>
      </div>
      <h3>全局配置</h3>
      <p>在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：</p>
      <p>完整引入 Element：</p>
      <div v-highlight>
        <pre><code>import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });</code></pre>
      </div>
      <p>按需引入 Element：</p>
      <div v-highlight>
        <pre><code>import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);  </code></pre>
      </div>
      <p>按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。</p>
      <h3>开始使用</h3>
      <p>至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。</p>
    </div>
</template>

<script>
  export default {
    name: 'el_quickstar'
  }
</script>

<style scoped>

</style>
